<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>QuestBoard v0.7.1｜工作游戏化仪表盘</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./style.css">
</head>
<body class="bg-slate-50 text-slate-800 scroll-smooth">
  <!-- 顶部条 -->
  <header class="sticky top-0 z-30 backdrop-blur bg-white/80 border-b border-slate-200">
    <div class="max-w-7xl mx-auto px-4 py-3 space-y-3">
      <div class="flex items-center gap-3">
        <div class="w-9 h-9 rounded-2xl bg-indigo-600 text-white grid place-items-center font-bold">Q</div>
        <div class="flex-1">
          <h1 class="text-xl font-semibold">QuestBoard v0.7.1｜工作游戏化仪表盘</h1>
          <p class="text-xs text-slate-500">DoD → T+X → MVD ｜ 💾 无缝文件同步｜动态类别｜PEM 包裹池｜拖拽看板｜重复任务｜⏱手动耗时</p>
        </div>
        <div class="hidden md:flex items-center gap-2">
          <button class="navbtn bg-slate-100 hover:bg-slate-200" data-goto="#new">➕ 新建</button>
          <button class="navbtn bg-slate-100 hover:bg-slate-200" data-goto="#today">🎯 今日</button>
          <button class="navbtn bg-slate-100 hover:bg-slate-200" data-goto="#progress">🚧 进行中</button>
          <button class="navbtn bg-slate-100 hover:bg-slate-200" data-goto="#backlog">📋 待办</button>
          <button class="navbtn bg-slate-100 hover:bg-slate-200" data-goto="#done">✅ 完成</button>
          <button id="btnWeekly" class="navbtn bg-emerald-600 text-white hover:bg-emerald-700">📈 周回顾</button>
          <button id="btnHelp" class="navbtn bg-slate-900 text-white hover:bg-black">❓ 帮助</button>
        </div>
      </div>
      <!-- 快速捕捉 -->
      <div class="grid grid-cols-1 md:grid-cols-12 gap-2">
        <input id="qcTitle" class="md:col-span-6 ring-focus rounded-lg border border-slate-300 p-2 text-sm" placeholder="快速捕捉：任务标题…" />
        <select id="qcCategory" class="md:col-span-2 ring-focus rounded-lg border border-slate-300 p-2 text-sm"></select>
        <select id="qcBucket" class="md:col-span-2 ring-focus rounded-lg border border-slate-300 p-2 text-sm">
          <option value="today">今日</option>
          <option value="backlog">待办</option>
        </select>
        <button id="btnQuickAdd" class="md:col-span-2 px-3 py-2 rounded-lg bg-indigo-600 text-white text-sm">⚡ 快速添加</button>
      </div>
      <div class="text-xs text-slate-500">快捷键：N 新建、T 今日、/ 搜索、W 周回顾</div>
    </div>
  </header>

  <main class="max-w-7xl mx-auto px-4 py-6 grid grid-cols-12 gap-6">
    <!-- 侧栏 -->
    <aside class="col-span-12 lg:col-span-3 space-y-4">
      <section class="card bg-white p-4">
        <h2 class="font-semibold mb-3">今日能量面板</h2>
        <div class="grid grid-cols-2 gap-3 text-sm">
          <div class="p-3 rounded-xl bg-indigo-50">
            <div class="text-xs text-indigo-600">今日 MVD</div>
            <div id="statMVD" class="text-2xl font-semibold">0</div>
          </div>
          <div class="p-3 rounded-xl bg-emerald-50">
            <div class="text-xs text-emerald-600">专注番茄</div>
            <div id="statPomodoro" class="text-2xl font-semibold">0</div>
          </div>
          <div class="p-3 rounded-xl bg-amber-50 col-span-2">
            <div class="flex items-center justify-between">
              <span class="text-xs text-amber-700">当前计时</span>
              <button id="btnStopTimer" class="text-xs text-amber-700 underline hidden">停止</button>
            </div>
            <div id="pomodoroClock" class="text-3xl font-bold text-amber-700 select-none">—</div>
          </div>
        </div>
        <div class="mt-3 flex gap-2">
          <button id="btnPomodoro25" class="flex-1 px-3 py-2 rounded-lg bg-amber-600 text-white text-sm">开始 25′</button>
          <button id="btnResetState" class="px-3 py-2 rounded-lg bg-slate-200 text-slate-800 text-sm">状态复位</button>
        </div>
      </section>

      <section class="card bg-white p-4">
        <h2 class="font-semibold mb-3">模块入口</h2>
        <div class="grid grid-cols-2 gap-2 text-sm">
          <button class="px-2 py-2 rounded-lg bg-slate-100 hover:bg-slate-200" data-goto="#today">🎯 今日</button>
          <button class="px-2 py-2 rounded-lg bg-slate-100 hover:bg-slate-200" data-goto="#progress">🚧 进行中</button>
          <button class="px-2 py-2 rounded-lg bg-slate-100 hover:bg-slate-200" data-goto="#backlog">📋 待办</button>
          <button class="px-2 py-2 rounded-lg bg-slate-100 hover:bg-slate-200" data-goto="#done">✅ 完成</button>
          <button class="px-2 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700" data-goto="#new">➕ 新建</button>
        </div>
        <div class="mt-4">
          <div class="text-xs text-slate-500 mb-2">按类别快速查看</div>
          <div id="quickCats" class="flex flex-wrap gap-2"></div>
        </div>
      </section>

      <section class="card bg-white p-4">
        <h2 class="font-semibold mb-3">过滤与搜索</h2>
        <label class="block text-sm mb-2">类别</label>
        <select id="filterCategory" class="w-full ring-focus rounded-lg border border-slate-300 p-2 text-sm"></select>
        <label class="block text-sm mt-3 mb-2">状态</label>
        <select id="filterStatus" class="w-full ring-focus rounded-lg border border-slate-300 p-2 text-sm">
          <option value="">全部</option>
          <option value="today">今日</option>
          <option value="progress">进行中</option>
          <option value="backlog">待办</option>
          <option value="done">完成</option>
        </select>
        <label class="block text-sm mt-3 mb-1">搜索（标题/备注/DoD）</label>
        <input id="filterSearch" class="w-full ring-focus rounded-lg border border-slate-300 p-2 text-sm" placeholder="关键词…" />
        <button id="btnClearFilters" class="mt-3 w-full px-3 py-2 rounded-lg bg-slate-100 text-slate-800 text-sm">清除过滤</button>
      </section>

      <section class="card bg-white p-4">
        <h2 class="font-semibold mb-2">类别管理</h2>
        <div class="flex gap-2">
          <input id="newCategory" class="flex-1 ring-focus rounded-lg border border-slate-300 p-2 text-sm" placeholder="新增类别（如：科室科研）" />
          <button id="btnAddCategory" class="px-3 py-2 rounded-lg bg-indigo-600 text-white text-sm">新增</button>
        </div>
        <div id="catList" class="mt-3 flex flex-col gap-2 text-xs"></div>
        <p class="mt-2 text-xs text-slate-500">支持重命名 / 删除（删除后任务会移动到“其他”）。</p>
      </section>

      <!-- 包裹池：自动汇集“今日 + 待办”任务 -->
      <section class="card bg-white p-4">
        <h2 class="font-semibold mb-3">包裹池（任务）</h2>
        <div class="flex items-center gap-2 mb-2">
          <label class="text-xs text-slate-500">按类别查看：</label>
          <select id="poolFilterCategory" class="ring-focus rounded-lg border border-slate-300 p-2 text-sm"></select>
          <button id="btnRefreshPool" class="px-3 py-2 rounded-lg bg-slate-100 text-sm">刷新</button>
        </div>
        <div id="poolTasks" class="space-y-2"></div>
        <hr class="my-4"/>
        <h3 class="font-semibold mb-2">包裹模板（PEM）</h3>
        <div class="space-y-2" id="pemList"></div>
        <details class="mt-2">
          <summary class="cursor-pointer select-none text-sm">➕ 新建包裹</summary>
          <div class="mt-2 space-y-2 text-sm">
            <input id="pemTitle" class="w-full ring-focus rounded-lg border border-slate-300 p-2" placeholder="包裹名称（如：竞争实验预热包）" />
            <div class="grid grid-cols-2 gap-2">
              <input id="pemMinutes" type="number" min="5" value="15" class="ring-focus rounded-lg border border-slate-300 p-2" placeholder="预热分钟（默认 15）" />
              <input id="pemLinks" class="ring-focus rounded-lg border border-slate-300 p-2" placeholder="常用链接（逗号分隔）" />
            </div>
            <textarea id="pemInputs" rows="2" class="w-full ring-focus rounded-lg border border-slate-300 p-2" placeholder="所需输入（逐行）"></textarea>
            <textarea id="pemSteps" rows="3" class="w-full ring-focus rounded-lg border border-slate-300 p-2" placeholder="预热步骤（逐行）"></textarea>
            <button id="btnAddPEM" class="px-3 py-2 rounded-lg bg-sky-600 text-white">保存包裹</button>
          </div>
        </details>
      </section>

      <section class="card bg-white p-4">
        <h2 class="font-semibold mb-3">提醒与同步</h2>
        <div class="flex flex-col gap-2 text-sm">
          <label class="inline-flex items-center gap-2">
            <input id="chkNotify" type="checkbox" class="scale-110" />
            启用到期提醒（提前 5 分钟）
          </label>
          <div class="text-xs text-slate-500">浏览器需允许通知；仅页面打开时有效。</div>
        </div>
        <hr class="my-3"/>
        <p class="text-xs text-slate-500 leading-5">选择坚果云/OneDrive等同步盘中的 JSON 文件，即可实现无缝同步。应用启动时自动加载，修改后自动保存。</p>
        <div class="mt-2 flex flex-wrap gap-2 items-center">
          <button id="btnPickSync" class="px-3 py-2 rounded-lg bg-indigo-600 text-white text-sm">选择/切换同步文件</button>
          <button id="btnDisconnectSync" class="px-3 py-2 rounded-lg bg-rose-500 text-white text-sm">断开连接</button>
          <label class="inline-flex items-center gap-2 text-sm">
            <input id="chkAutoSave" type="checkbox" class="scale-110" checked> 自动保存到文件
          </label>
        </div>
        <div id="syncInfo" class="text-xs text-slate-500 mt-2">未连接同步文件</div>
      </section>
    </aside>

    <!-- 主看板（纵向堆叠四块） -->
    <section class="col-span-12 lg:col-span-9 space-y-6">
      <!-- 新建任务 -->
      <section id="new" class="card bg-white p-4">
        <h2 class="font-semibold mb-4">新建任务（Quest）</h2>
        <div class="grid md:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm mb-1">标题</label>
            <input id="title" class="w-full ring-focus rounded-lg border border-slate-300 p-2" placeholder="例如：竞争实验统计脚本 A 版" />
          </div>
          <div>
            <label class="block text-sm mb-1">类别</label>
            <select id="category" class="w-full ring-focus rounded-lg border border-slate-300 p-2"></select>
          </div>

          <!-- 新增：任务属性 -->
          <div>
            <label class="block text-sm mb-1">任务类型（kind）</label>
            <select id="kind" class="w-full ring-focus rounded-lg border border-slate-300 p-2">
              <option value="core">core（主业）</option>
              <option value="enabling">enabling（赋能）</option>
              <option value="admin">admin（科室/行政）</option>
              <option value="life">life（生活）</option>
            </select>
          </div>
          <div>
            <label class="block text-sm mb-1">权重（weight）</label>
            <select id="weight" class="w-full ring-focus rounded-lg border border-slate-300 p-2">
              <option value="1">1</option>
              <option value="3">3</option>
              <option value="5" selected>5</option>
              <option value="8">8</option>
            </select>
          </div>
          <div class="md:col-span-2">
            <label class="block text-sm mb-1">PSM（过程成功指标，1-2 条足够）</label>
            <input id="psm" class="w-full ring-focus rounded-lg border border-slate-300 p-2" placeholder="例如：完成 2 个接种 / 完成 1 次数据清洗" />
          </div>

          <div class="md:col-span-2">
            <label class="block text-sm mb-1">DoD（完成定义，逐行一条）</label>
            <textarea id="dod" rows="3" class="w-full ring-focus rounded-lg border border-slate-300 p-2" placeholder="示例：
n≥3 独立重复
脚本可复现已入库
质控图含异常点解释"></textarea>
          </div>

          <div>
            <label class="block text-sm mb-1">T+X（A版时点，小时或天）</label>
            <div class="flex gap-2">
              <input id="txValue" type="number" min="1" class="w-24 ring-focus rounded-lg border border-slate-300 p-2" placeholder="2" />
              <select id="txUnit" class="ring-focus rounded-lg border border-slate-300 p-2">
                <option value="h">小时</option>
                <option value="d">天</option>
              </select>
              <input id="dueAt" type="datetime-local" class="flex-1 ring-focus rounded-lg border border-slate-300 p-2" />
            </div>
            <p class="text-xs text-slate-500 mt-1">输入 T+X 或直接指定截止时间（两者选其一）</p>
          </div>
          <div>
            <label class="block text-sm mb-1">重复</label>
            <select id="repeat" class="w-full ring-focus rounded-lg border border-slate-300 p-2">
              <option value="none">无</option>
              <option value="daily">每日</option>
              <option value="weekly">每周</option>
              <option value="monthly">每月</option>
            </select>
          </div>
          <div>
            <label class="block text-sm mb-1">优先放入</label>
            <select id="bucket" class="w-full ring-focus rounded-lg border border-slate-300 p-2">
              <option value="today">今日</option>
              <option value="backlog">待办</option>
            </select>
          </div>
        </div>
        <div class="mt-4 flex gap-3 flex-wrap">
          <button id="btnAdd" class="px-4 py-2 rounded-lg bg-indigo-600 text-white">添加任务</button>
          <button id="btnExportMD" class="px-4 py-2 rounded-lg bg-slate-900 text-white">导出 Markdown</button>
          <button id="btnExportJSON" class="px-4 py-2 rounded-lg bg-slate-100">导出 JSON</button>
          <label class="px-4 py-2 rounded-lg bg-slate-100 cursor-pointer">导入 JSON<input id="importJSON" type="file" accept="application/json" class="hidden" /></label>
        </div>
      </section>

      <!-- 四列（纵向堆叠） -->
      <section id="today" class="card bg-white p-3 droptarget">
        <h3 class="font-semibold mb-2">🎯 今日</h3>
        <div id="colToday" class="space-y-3 min-h-[120px]"></div>
      </section>

      <section id="progress" class="card bg-white p-3 droptarget">
        <h3 class="font-semibold mb-2">🚧 进行中</h3>
        <div id="colProgress" class="space-y-3 min-h-[120px]"></div>
      </section>

      <section id="backlog" class="card bg-white p-3 droptarget">
        <h3 class="font-semibold mb-2">📋 待办</h3>
        <div id="colBacklog" class="space-y-3 min-h-[120px]"></div>
      </section>

      <section id="done" class="card bg-white p-3 droptarget">
        <h3 class="font-semibold mb-2">✅ 已完成</h3>
        <div id="colDone" class="space-y-3 min-h-[120px]"></div>
      </section>
    </section>
  </main>

  <!-- 周回顾弹窗 -->
  <div id="modalWeekly" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/40"></div>
    <div class="absolute inset-0 grid place-items-center p-4">
      <div class="max-w-3xl w-full card bg-white p-5">
        <div class="flex items-center justify-between">
          <h3 class="text-lg font-semibold">📈 周回顾</h3>
          <button class="px-2 py-1 rounded bg-slate-100" data-close>关闭</button>
        </div>
        <div id="weeklyBody" class="mt-3 text-sm space-y-3"></div>
        <div class="mt-4 flex gap-2">
          <button id="btnCopyWeekly" class="px-3 py-2 rounded bg-slate-900 text-white text-sm">复制为 Markdown</button>
          <button data-close class="px-3 py-2 rounded bg-slate-100 text-sm">完成</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 帮助弹窗 -->
  <div id="modalHelp" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/40"></div>
    <div class="absolute inset-0 grid place-items-center p-4">
      <div class="max-w-2xl w-full card bg-white p-5 text-sm leading-6">
        <div class="flex items-center justify-between">
          <h3 class="text-lg font-semibold">❓ 使用说明 (v0.7.1)</h3>
          <button class="px-2 py-1 rounded bg-slate-100" data-close>关闭</button>
        </div>
        <ol class="list-decimal pl-5 mt-3 space-y-2">
            <li><strong>无缝同步</strong>: 首次使用时，在侧边栏“提醒与同步”模块点击“选择同步文件”，选择你坚果云等同步盘中的 `QuestBoard.json` 文件。</li>
            <li><strong>自动加载与保存</strong>: 之后每次打开本页面，应用都会自动连接该文件并加载最新数据。你的任何修改也会被自动保存到该文件中，无需手动操作。</li>
            <li><strong>切换文件</strong>: 如果需要更换同步文件，可以点击“断开连接”后，再重新选择新文件。</li>
        </ol>
      </div>
    </div>
  </div>

  <!-- 附加 PEM 弹窗（沿用） -->
  <div id="modalAttachPEM" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/40"></div>
    <div class="absolute inset-0 grid place-items-center p-4">
      <div class="max-w-lg w-full card bg-white p-5 text-sm">
        <div class="flex items-center justify-between">
          <h3 class="text-lg font-semibold">附加包裹到任务</h3>
          <button class="px-2 py-1 rounded bg-slate-100" data-close>关闭</button>
        </div>
        <div class="mt-3">
          <label class="block text-sm mb-1">选择包裹</label>
          <select id="attachPEMSelect" class="w-full ring-focus rounded-lg border border-slate-300 p-2"></select>
        </div>
        <div class="mt-4 flex gap-2">
          <button id="btnApplyPEM" class="px-3 py-2 rounded bg-sky-600 text-white">应用并开始预热</button>
          <button data-close class="px-3 py-2 rounded bg-slate-100">取消</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 任务卡模板：新增“累计用时”与“⏱ 记时+”按钮 -->
  <template id="taskCardTpl">
    <div class="task card bg-white border border-slate-200 p-3" data-id="" draggable="true">
      <div class="flex items-start justify-between gap-3">
        <div class="min-w-0">
          <div class="flex flex-wrap items-center gap-2 mb-1">
            <span class="title font-medium truncate max-w-[30ch]"></span>
            <span class="badge bg-slate-100 text-slate-700 category"></span>
            <span class="badge bg-indigo-100 text-indigo-700 status"></span>
            <span class="badge hidden dueflag"></span>
            <span class="badge hidden repeatflag"></span>
            <span class="badge kindflag hidden"></span>
          </div>
          <div class="text-xs text-slate-500 due"></div>
          <div class="text-xs text-slate-600 mt-1 time-row">
            累计用时：<span class="timeSum">0</span> 分钟
          </div>
        </div>
        <div class="flex flex-wrap gap-2">
          <button class="btnStart text-xs px-2 py-1 rounded bg-amber-100 text-amber-800">开始25′</button>
          <button class="btnAddMinutes text-xs px-2 py-1 rounded bg-cyan-100 text-cyan-800">⏱ 记时+</button>
          <button class="btnMVD text-xs px-2 py-1 rounded bg-emerald-100 text-emerald-800">MVD 完成</button>
          <button class="btnMove text-xs px-2 py-1 rounded bg-slate-100">移列</button>
          <button class="btnSnooze1h text-xs px-2 py-1 rounded bg-slate-100">+1h</button>
          <button class="btnSnooze1d text-xs px-2 py-1 rounded bg-slate-100">+1d</button>
          <button class="btnAttachPEM text-xs px-2 py-1 rounded bg-sky-100 text-sky-800">附包裹</button>
          <button class="btnDel text-xs px-2 py-1 rounded bg-rose-100 text-rose-800">删除</button>
        </div>
      </div>
      <ul class="dod mt-2 space-y-1 text-sm"></ul>
      <textarea class="notes mt-2 w-full ring-focus rounded-lg border border-slate-300 p-2 text-sm" placeholder="备注…"></textarea>
    </div>
  </template>

  <!-- 新增：引入 idb-keyval 库 -->
  <script src="https://cdn.jsdelivr.net/npm/idb-keyval@6/dist/umd.js"></script>
  <script src="./script.js"></script>
</body>
</html>